import React from 'react';
import { Search } from 'lucide-react';
import { Layout } from '../components/Layout';

interface HomeViewProps {
  inputTopic: string;
  onInputChange: (value: string) => void;
  onGenerate: (topic?: string) => void;
  onSettingsClick: () => void;
  onHomeClick: () => void;
  sidebarContent: React.ReactNode;
}

export const HomeView: React.FC<HomeViewProps> = ({
  inputTopic,
  onInputChange,
  onGenerate,
  onSettingsClick,
  onHomeClick,
  sidebarContent
}) => {
  const quickTags = ['驾考科目一', '自考英语', 'Python 基础', '公务员考试', '生活常识'];

  return (
    <Layout
      onSettingsClick={onSettingsClick}
      onHomeClick={onHomeClick}
      sidebarContent={sidebarContent}
    >
      <div className="flex flex-col items-center justify-center h-full p-8 bg-gradient-to-br from-slate-50 to-indigo-50/30">
        <div className="w-full max-w-2xl text-center space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
          <div className="space-y-2">
            <h1 className="text-5xl font-black text-slate-900 tracking-tight">
              AI 助你掌控{' '}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-indigo-400">
                任何学科
              </span>
            </h1>
            <p className="text-lg text-slate-500 max-w-lg mx-auto">
              使用先进的 AI 模型即时生成任意主题的练习试卷。
            </p>
          </div>

          <div className="relative max-w-xl mx-auto w-full group">
            <div className="absolute inset-0 bg-indigo-200 rounded-2xl blur opacity-20 group-hover:opacity-40 transition-opacity"></div>
            <div className="relative bg-white p-2 rounded-2xl shadow-xl flex items-center border border-slate-200 focus-within:border-primary focus-within:ring-4 focus-within:ring-indigo-100 transition-all">
              <Search className="w-6 h-6 text-slate-400 ml-3" />
              <input
                className="flex-1 px-4 py-3 bg-transparent outline-none text-lg text-slate-800 placeholder:text-slate-300"
                placeholder="输入主题 (例如: 驾考, 自考, ReactJS, 中国历史)"
                value={inputTopic}
                onChange={(e) => onInputChange(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && onGenerate()}
              />
              <button
                onClick={() => onGenerate()}
                className="bg-primary hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-semibold transition-colors flex items-center gap-2 shrink-0"
              >
                生成试卷
              </button>
            </div>
          </div>

          <div className="flex flex-wrap justify-center gap-3">
            {quickTags.map(tag => (
              <button
                key={tag}
                onClick={() => {
                  onInputChange(tag);
                  onGenerate(tag);
                }}
                className="px-4 py-1.5 bg-white border border-slate-200 rounded-full text-sm text-slate-600 hover:border-primary hover:text-primary transition-colors"
              >
                {tag}
              </button>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  );
};